<template>
	<view class="container">
		<view class="list" v-if="wifiList.length > 0">
			<block v-for="item in wifiList" :key="item.SSID">
				<view class="box" hover-class="hoverClass" @click="choseWIFI(item)">
					<view class="info">
						<uni-icons custom-prefix="iconfont" type="icon-wifi" size="20" color="#3a3a3a"></uni-icons>
						<view class="name">
							{{ item.SSID }}
						</view>
					</view>
					<uni-icons type="right" size="16" color="#bbb"></uni-icons>
				</view>
			</block>
		</view>
		<view class="empty" v-else>
			<image class="image" src="@/static/img/empty.png" mode="aspectFit"></image>
			<view class="emptyWord">扫描WiFi中...</view>
		</view>
	</view>
</template>

<script>
import api from '@/api/api';
const plugin = requirePlugin('ttLock');
export default {
	data() {
		return {
			gateway: {},
			wifiList: []
		};
	},
	onLoad(e) {
		this.gateway = JSON.parse(e.item);
		this.scanWifi();
	},
	onHide() {
		this.handleStopAllOperations();
	},
	onUnload() {
		this.handleStopAllOperations();
	},
	methods: {
		choseWIFI(item) {
			let pages = getCurrentPages();
			let prevPage = pages[pages.length - 2];
			let obj = item;
			prevPage.$vm.wifiUpdate(obj);
			uni.navigateBack();
		},
		// 搜索WiFi
		scanWifi() {
			uni.showNavigationBarLoading();
			this.wifiList = [];
			plugin
				.scanWiFiByGateway(this.gateway, (err) => {
					console.log(err);
				})
				.then((res) => {
					console.log('WIFI扫描完成', res);
					if (res.errorCode === 0) {
						this.wifiList = res.data.wifiList;
						this.handleStopAllOperations();
					} else {
						this.handleStopAllOperations();
						uni.showToast({
							icon: 'none',
							title: res.errorMsg
						});
					}
				});
		},
		// 停止所有蓝牙操作
		handleStopAllOperations() {
			plugin.stopAllOperations();
			uni.hideNavigationBarLoading();
		}
	}
};
</script>

<style lang="scss">
.container {
	.list {
		padding: 20rpx;
		.box {
			background: #fff;
			border-radius: 16rpx;
			margin-bottom: 20rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 24rpx;
			.info {
				display: flex;
				align-items: center;
				.name {
					font-size: 28rpx;
					font-weight: bold;
					margin-left: 20rpx;
				}
			}
		}
	}
}
</style>
